<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_CSS显示模式</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 5px solid #f00;
        /*块级元素：默认竖着排，而且可以设置宽度高度*/
        display: block;
        /*
        display: inline;
        */
    }
    span {
        background-color: #ff0;
        width: 200px;
        height: 200px;
        /* 行内元素 不能设置宽高 横着排*/
        display: inline;
        /* 可以切换元素的显示模式*/
        display: block;
    }
    input,button {
        /* 行内元素 即能横着排 又可以设置宽度和高度 横向排 */
        display: inline-block;
        width: 200px;
        height: 200px;
    }
    .d2:hover {
        /* 悬停时，元素显示模式消失，且释放占据的资源*/
        display: none;
    }
</style>
<body>
<!--
.d*3
生成3个div 快捷补全
-->
    <div class="d1">111</div>
    <div class="d2">222</div>
    <div class="d3">333</div>
    <hr>
    <span>123456</span>
    <span>123456</span>
    <span>123456</span>
<hr>
<input type="text">
<input type="text">
<input type="text">
<button>按钮</button>







</body>
</html>